<template>
  <div class="showMain">
    <div class="skill">
      SKILLS
    </div>
    <div id="myChart">
      <div class="item">
        <div class="face">
          <div class="pic">
            <i class="iconfont icon-css aliIcon"></i>
          </div>
          <div class="desc">CSS</div>
          <div class="icon">
            <i class="fa fa-cog fa-spin fa-fw"></i>
          </div>
        </div>
        <div class="back">
          <div class="star">
            <i class="iconfont icon-STAR icon"></i>
            <i class="iconfont icon-STAR icon"></i>
            <i class="iconfont icon-STAR icon"></i>
          </div>
          <div class="content">
            基本掌握CSS，能做一些简单特效（如本网站），对于CSS3的新特性有一定了解与使用（flex, transition等）
          </div>
        </div>
      </div>
      <div class="item">
        <div class="face">
          <div class="pic">
            <i class="iconfont icon-logo-javascript aliIcon"></i>
          </div>
          <div class="desc">JavaScript</div>
          <div class="icon">
            <i class="fa fa-cog fa-spin fa-fw"></i>
          </div>
        </div>
        <div class="back">
          <div class="star">
            <i class="iconfont icon-STAR icon"></i>
            <i class="iconfont icon-STAR icon"></i>
            <i class="iconfont icon-STAR icon"></i>
            <i class="iconfont icon-STAR icon"></i>
          </div>
          <div class="content">
            熟练使用ES6基本使用语法，对于JS高级（如原型链闭包事件循环等）有一定了解，基本能够满足日常开发需求。
          </div>
        </div>
      </div>
      <div class="item">
        <div class="face">
          <div class="pic">
            <i class="iconfont icon-vuejs aliIcon"></i>
          </div>
          <div class="desc">Vue</div>
          <div class="icon">
            <i class="fa fa-cog fa-spin fa-fw"></i>
          </div>
        </div>
        <div class="back">
          <div class="star">
            <i class="iconfont icon-STAR icon"></i>
            <i class="iconfont icon-STAR icon"></i>
            <i class="iconfont icon-STAR icon"></i>
            <i class="iconfont icon-STAR icon"></i>
          </div>
          <div class="content">
            能够熟练使用Vue全家桶开发H5页面，小程序，网页等。公司项目用的Vue开发，能满足日常开发需求。对于Vue原理有浅层认知。
          </div>
        </div>
      </div>
      <div class="item">
        <div class="face">
          <div class="pic">
            <i class="iconfont icon-node aliIcon"></i>
          </div>
          <div class="desc">Node.js</div>
          <div class="icon">
            <i class="fa fa-cog fa-spin fa-fw"></i>
          </div>
        </div>
        <div class="back">
          <div class="star">
            <i class="iconfont icon-STAR icon"></i>
            <i class="iconfont icon-STAR icon"></i>
          </div>
          <div class="content">
            了解Node.js，使用Koa2开发过自己的微信公众号，能够根据用户输入的电影名称提供相应相关的电影简介。数据库使用过MongoDB。
          </div>
        </div>
      </div>
      <div class="item">
        <div class="face">
          <div class="pic">
            <i class="iconfont icon-react aliIcon"></i>
          </div>
          <div class="desc">React</div>
          <div class="icon">
            <i class="fa fa-cog fa-spin fa-fw"></i>
          </div>
        </div>
        <div class="back">
          <div class="star">
            <i class="iconfont icon-STAR icon"></i>
          </div>
          <div class="content">
            了解React，使用过React，redux等模仿简书首页。
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'second',
  mounted () {
  },
  data () {
    return {
    }
  },
  methods: {
  }
}
</script>

<style scoped lang="stylus">
  .showMain
    position: absolute;
    background: url("https://20181106.oss-cn-beijing.aliyuncs.com/2.jpg") no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .skill
      position absolute
      top 18%
      left 50%
      transform translateX(-50%)
      font-size 3rem
      color #fff
  #myChart
    margin-left: 15%;
    margin-top: 15%;
    width: 75%;
    height: 45%;
    display flex
    z-index: 2;
    .item
      position relative
      width 20%
      margin 1%
      &:hover
        .face
          opacity 0;
          transform translateY(-100%) rotateX(90deg);
          transform-origin:bottom center;
        .back
          opacity 1
      .face
        width 100%
        height 100%
        opacity 1;
        background-color rgba(0,0,0,.4)
        border-radius 10px
        border 1px solid #fff
        transform translateY(0) rotateX(0);
        transition all 0.6s ease-in-out 0s;
        .pic
          width 100%
          margin 10% auto 0 auto
          background-color rgba(255,255,255,.5)
          text-align center
          height 30%
          font-size 3rem
          .aliIcon
            font-size 3rem
      .back
        width 100%
        position absolute
        top 0
        bottom 0
        opacity 0
        transition all 0.60s ease-in-out 0s;
        background-color paleturquoise
        height 100%
        border-radius 10px
        .star
          position absolute
          top 10%
          left 0
          width 100%
          height 12%
          text-align center
          .icon
            font-size 2rem
        .content
          position absolute
          top 25%
          left 10%
          width 80%
          border-top 1px solid #fff
          border-bottom 1px solid #fff
          height 60%
          padding 10px
          font-size 0.9rem
          box-sizing border-box
      .desc
        font-size 1.5rem
        text-align center
        margin-top 20%
        color #fff
      .icon
        color #ffffff
        margin-top 20%
        text-align center
        font-size 1.5rem
</style>
